<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

		<title>应届大学生战力榜</title>
		<!--vue-->
		<script src="https://lib.baomitu.com/vue/2.6.14/vue.js"></script>
		<!--axios-->
		<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
		<!--element-->
		<!-- 引入样式 -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui@2.15.5/lib/theme-chalk/index.css">
		<!-- 引入组件库 -->
		<script src="https://unpkg.com/element-ui@2.15.5/lib/index.js"></script>
		<style>
			.el-divider--horizontal{
				margin: 5px 0!important;
			}
			.el-aside{
				width: 100%!important;
			}
		</style>
	</head>
	<body>
		<!-- 页面渲染 -->
		<div id="app">
			<!-- 数据展示区 -->
			<el-container>

				<el-aside>
					<el-tabs tab-position="left" v-model="activeName" type="card" @tab-click="tabClick">
						<el-tab-pane label="法师" name="法师"></el-tab-pane>
						<el-tab-pane label="野蛮人" name="野蛮人"></el-tab-pane>
						<el-tab-pane label="猎魔" name="猎魔"></el-tab-pane>
						<el-tab-pane label="圣教军" name="圣教军"></el-tab-pane>
						<el-tab-pane label="武僧" name="武僧"></el-tab-pane>
						<el-tab-pane label="死灵" name="死灵"></el-tab-pane>

						<el-tab-pane   name="请假人员" >
							<span slot="label" style="color: red">请假人员</span>
						</el-tab-pane>
						<el-tab-pane name="失联人员"   >
							<span slot="label" style="color: red">失联人员</span>
						</el-tab-pane>

					 <templete v-for="row in groupUserList">

						 <el-row type="flex" align="middle"  >
							 <el-col :span="16"><span>{{ row.nickName }} </span></el-col>
							 <el-col :span="8" >
								 <el-button type="primary" size="small" style="float: right;"> <a :href="'info.html?nickName='+row.nickName" style="color: white;text-decoration:none"  >编辑</a></el-button>

							 </el-col>
						 </el-row>
						 <el-divider></el-divider>
					 </templete>




					</el-tabs>
			</el-container>

		</div>

		<script>
			axios.defaults.baseURL = ""
			const app = new Vue({
				el: "#app",
				data: {
					activeName:"法师",
					groupUserList: [

					],
					userList: [

					],
					jobList:["法师","死灵","野蛮人","圣教军","武僧","猎魔"]
				},
				methods: {
					// 查询所有数据
					findall() {
						axios.get("findall")
							.then(Promise => {
								this.userList = Promise.data
								this.groupUserList = this.userList.filter(a => a.jobName == "法师");
							})
					},
					//修改数据
					saveAll() {
						axios.put("saveAll", this.userList)
							.then(Promise => {
								let msg = Promise.data
								alert(msg)
							})
					},
					saveUpdate(o){
						let uList=[];
						uList.push(o);
						axios.put("saveAll",uList)
								.then(Promise => {
									let msg = Promise.data

								})

					},
					tabClick(tab, event) {
						if(tab.name=="请假人员" ||tab.name=="失联人员")
						{
							this.groupUserList = this.userList.filter(a => a.status == tab.name.replace("人员",""));
						}else {
							this.groupUserList = this.userList.filter(a => a.jobName == tab.name);
						}
					}
				},
				created() {
					this.findall()
				}
			})
		</script>
	</body>
</html>
